<template>
  <div class="box">测试 | {{ 1+1 }}</div>
  <mulSlot>
    <template #car="abc">
      <div class="carList" :style="car.css">
        <div class="cl-item" v-for="(item,index) in car.list" :key="index" :style="item.css">{{ item.text }}-{{ abc.a[index] }}</div>
      </div>
    </template>
    <template #person>
      <div class="carList" :style="person.css">
        <div class="cl-item" v-for="(item,index) in person.list" :key="index">{{ item }}</div>
      </div>
    </template>
  </mulSlot>
</template>
<script>
import mulSlot from './components/mulSlot.vue'
export default{
  components : {
    mulSlot
  },
  data(){
    return {
      a : 1,
      b : 2,
      car : {
        css : {
          display: 'grid',
          "grid-template-rows" : 'repeat(3,100px)',
          "grid-template-columns" : 'repeat(3,1fr)',
        },
        list : [{
          text : '1',
          css : {
            width : '300px'
          }
        },{
          text : '2'
        },{
          text : '3'
        }]
      },
      person : {
        css : {
          display: 'grid',
          "grid-template-rows" : 'repeat(3,100px)',
          "grid-template-columns" : 'repeat(3,100px)',
        },
        list : [1,2,3,4,5]
      }
    }
  },
  methods : {
    add(){
      console.log(`helloworld`);
    }
  },
  mounted(){
    //50 * 0.05 = 2.5
    console.log(`helloworld`);
    console.log(this.$route);
  }
}
</script>
<style lang="scss" scoped>
.box{
  width:100px;
  height:100px;
  border:1px solid #000;
}
.carList{
  .cl{
    &-item{
      border:1px solid #000;
    }
  }
}
</style>
